<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px">
            <div>
                <div>
                    <img src="/src/assets/ruby/welcome-chinese.png" alt="" width="100%">
                </div>
                <div style="border: 1px solid #cccccc; margin-top: 50px;">
                    <div>
                        <div
                            style="padding-left: 30px; font-size: 18px; font-weight: 800;height: 50px; line-height: 50px;background-color: #FBFBFB;">
                            注册</div>
                        <div style="display: flex; justify-content: center;">
                            <div class="bty-login-content">
                                <input type="text" style="width: 200px;" v-model="registerForm.username" placeholder="长度至少5位">
                                <span>用户名 *：</span>
                                <div style="margin-bottom: 20px;">
                                    <br>
                                </div>
                                <input type="text" style="width: 200px;" v-model="registerForm.password" placeholder="至少使用数字与字母">
                                <span>密码 *：</span>
                                <div style="margin-bottom: 20px;">
                                    <br>
                                </div>
                                <input type="text" style="width: 200px;" v-model="registerForm.againPassword" placeholder="至少使用数字与字母">
                                <span>确认密码 *：</span>
                                <div style="margin-bottom: 20px;">
                                    <br>
                                </div>
                                <input type="text" style="width: 200px;" v-model="registerForm.email">
                                <span>邮箱 *：</span>
                                <div style="margin-bottom: 20px;">
                                    <br>
                                </div>
                                <input type="text" style="width: 200px;" v-model="registerForm.tel">
                                <span>电话 *：</span>
                                <div style="margin-bottom: 20px;">
                                    <br>
                                </div>
                                <input type="text" style="width: 200px;" v-model="registerForm.verify">
                                <span>校验码 *：</span>
                            </div>
                        </div>
                        <div style="height: 40px; height: 50px; text-align: center;">
                            <VerificationCode />
                        </div>
                        <div style="text-align: center;margin-bottom: 10px;">
                            <el-button type="primary" round @click="subRegister">注册用户</el-button>
                        </div>

                    </div>
                    <div></div>

                    <div class="bty-login-note">
                        <span style="color: red;">{{ errMessage }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { register } from '@/requests/index';
import VerificationCode from '../views/VerificationCode.vue';
const errMessage = ref();
const router = useRouter();
const registerForm = reactive({
    username: '',
    password: '',
    againPassword: '',
    tel: '',
    email: ''
});

const subRegister = async()=>{
    const verify = window.localStorage.getItem("verify");
    if (registerForm.password !== registerForm.againPassword){
        errMessage.value = "两次输入密码不一样";
        return;
    }
    if (verify !== registerForm.verify ) {
        errMessage.value = "验证码错误";
        return;
    };
    const hasNumber = /[2-9]/.test(registerForm.password);
    const hasLetter = /[a-zA-Z]/.test(registerForm.password);
    if (hasNumber && hasLetter){
        const res = await register(registerForm);
        if (res.status === 2000){
            router.push({path: '/login'})
        }else{
            errMessage.value = res.msg
        }        
    } else{
        errMessage.value = "用户名或密码不符合要求！";
        return;
    }
}

</script>

<style scoped>
:deep(.el-input__inner) {
    border: 1px solid #e9eef3;
}

.bty-login-content {
    margin-top: 20px;
}

.bty-login-content>span,
input {
    float: right;
}

.bty-login-note {
    text-align: center;
    margin-bottom: 50px;
}
</style>